<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03_元素属性操作</title>
        <!-- 元素属性操作：针对固定属性、附加属性操作
              元素    固定属性----清楚：元素是否可用属性【w3c元素出现设置属性】
                     附加属性----清楚：表单为主，附加属性checked、disabled...
              prop()         ---功能：与attr类似，附加属性，针对表单，默认选中
              removeProp()   ---功能：与removeAttr类似，附加属性，针对表单，移除选中                 
         -->
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        
        <!-- 复选框，默认选中  id="myCheckBox"
             三个按钮      id="getProBtn"    获取属性
                          id="setProBtn"    设置属性
                          id=removeProBtn"" 移除属性
            弹出显示文字：div id="output"              
         -->
         <h1>prop()和removeProp()函数使用</h1>
         <input type="checkbox"  id="myCheckBox" checked />
         <button id="getAttrBtn">获取属性</button>
         <button id="setAttrBtn">设置属性</button>
         <button id="removeAttrBtn">移出属性</button>
         <div id="output"></div>
         <script>
             /*prop() 点击--获取属性--打印复选框的值
                                    复选框的值是：+变量
			prop（"checked"）--input元素--checked属性--属性值bool【true，false】
             */ 
            $("#getAttrBtn").click(function(){
                //prop()获取元素的附加属性---input中checked
                var isChecked=$("#myCheckBox").prop("checked");
                $("#output").text("复选框的值是："+isChecked);
            });
			// prop("checked","checked") 取消选中
			$("#setAttrBtn").click(function(){
			    $("#myCheckBox").prop("checked",false);
			    $("#output").text("复选框的值是：false");
			});
			//removeProp("checked")  取消选中--删除 checked属性
			$("#removeAttrBtn").click(function(){
			    $("#myCheckBox").removeProp("checked");
			    $("#output").text("复选框的值已经移除");
			});
         </script>
    </body>
</html>